<template>
  <aside class="navWrap">
    <div class="navInner">
      <!--      <div class="navHend">左侧标题</div>-->
      <div class="handShank" @click="isCollapse = !isCollapse">
        <span v-show="isCollapse">
                    <el-icon><DArrowRight /></el-icon>
<!--          right-->
        </span>

        <span v-show="!isCollapse">
                    <el-icon><DArrowLeft /></el-icon>
<!--          left-->
        </span>
      </div>

      <el-menu
        ref="elMenu"
        :default-active="defaultActive"
        class="el-menu-vertical"
        :collapse="isCollapse"
        @open="handleOpen"
      >
        <!-- 是否含有二级菜单 -->
        <div v-for="(level1, i1) in menuData" :key="`${i1}`">
          <!-- 无子级 -->
          <el-menu-item
            v-if="!level1.children || !level1.children.length"
            :index="level1.name"
            @click="navClick(level1)"
          >
            <el-icon><location /></el-icon>
            <template #title>{{ level1.title }}</template>
          </el-menu-item>
          <!-- 有子级 -->
          <el-sub-menu v-if="level1.children && level1.children.length" :index="level1.name">
            <template #title>
              <!--              <img-->
              <!--                style="width: 18px; margin-right: 20px"-->
              <!--                v-if="level1.icon"-->
              <!--                :src="icon[level1.icon]"-->
              <!--                alt=""-->
              <!--              />-->
              <el-icon><location /></el-icon>
              <span v-show="!isCollapse">{{ level1.title }}</span>
            </template>

            <!-- 三级菜单判断 -->
            <template v-for="(level2, i2) in level1.children">
              <!-- 无子级 -->
              <el-menu-item-group v-if="!level2.children || !level2.children.length" :key="`${i1}-${i2}`">
                <el-menu-item :index="level2.name" @click="navClick(level2)">
                  {{ level2.title }}
                </el-menu-item>
              </el-menu-item-group>

              <!-- 有子级 -->
              <el-sub-menu
                v-if="level2.children && level2.children.length"
                :key="`${i1}-${i2}`"
                :index="level2.name"
              >
                <template #title>
                  <span>{{ level2.title }}</span>
                </template>
                <el-menu-item
                  v-for="(level3, i3) in level2.children"
                  :key="`${i1}-${i2}-${i3}`"
                  :index="level3.name"
                  @click="navClick(level3)"
                >
                  {{ level3.title }}
                </el-menu-item>
              </el-sub-menu>
            </template>
          </el-sub-menu>
        </div>
      </el-menu>
    </div>
  </aside>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, watch } from 'vue'
import { useRouter } from 'vue-router'

import { Location, DArrowRight, DArrowLeft } from '@element-plus/icons-vue'
import { NavItem } from '@/common/types'

import newMenu from '@/common/menu'

export default defineComponent({
  name: 'NavPart',
  components: {
    // Document,
    // IconMenu,
    Location,
    // Setting,
    DArrowRight,
    DArrowLeft
  },

  setup() {
    // const icon = {
    //   iconXtqx,
    //   iconDxgl,
    //   iconTcgs,
    //   iconYcyd,
    //   iconClqh,
    //   iconBfhs,
    //   iconTcc,
    //   iconJsc
    // }
    const router = useRouter()

    const reactiveData = reactive({
      menuData: [],
      isCollapse: false,
      defaultActive: 'Vuex',
      navClick(e: NavItem) {
        // console.log('navClick e~', e)
        router.push(e.path)
      },
      handleOpen() {
        // handleOpen(key: string, keyPath: string[]) {
        // console.log(key, keyPath)
      }
    })

    const type = localStorage.getItem('userType') || 'admin'
    // console.log('userType', type)
    if (type) {
      reactiveData.menuData = newMenu[type]
    }

    const changeNavActive = (currentPath: string) => {
      reactiveData.defaultActive = currentPath.replaceAll('/', '')
    }

    watch(
      () => router.currentRoute.value,
      (_n) => {
        changeNavActive(_n.path)
      }
    )

    return {
      // icon,
      ...toRefs(reactiveData)
    }
  }
})
</script>

<style lang="stylus">
// 左侧栏折叠 bug 修复
.el-menu-vertical{
  width 220px;
  :deep(.el-sub-menu){
    &.el-menu--collapse{
      .el-sub-menu .el-sub-menu__icon-arrow{
        display none
      }
    }
  }
}
</style>

<style scoped lang="stylus">
@import "../style/basic.styl"

:deep(.el-menu){

  .el-icon{
    width:12px
    height:12px
    svg{
      width:12px
      height:12px
    }
  }
  .el-menu-item,
  .el-sub-menu__title{
    color: #333
    //background-color: #2D3E83
    background-color: #fff
  }
  .el-menu-item-group__title{
    //background-color: #2D3E83
  }
  .el-menu-item-group > ul{
    //background-color: #2D3E83
    .is-active{
      //color: #2f3f7e
      //background-color: #E6E9F0
      //border-bottom-left-radius 5px
      //border-top-left-radius 5px
    }
  }
  .el-menu-item.is-active{
    color: #3786FD
    border-left: 4px solid #3786FD
    background-color: #E5F1FF
    //border-bottom-left-radius 5px
    //border-top-left-radius 5px
  }
}

.navWrap {
  position relative
  z-index 2
  //padding: 0 0 10px 10px
  //padding-left: 8px
  box-sizing border-box
  //height 100%
  background-color: #fff

  .navInner{
    height 100%
    //background #2D3E83
    border-radius: 3px
  }


  .navHend{
    height 50px
    line-height 50px
    text-align center
    font-size 14px
  }
  .handShank{
    display: none

    position absolute
    top 0
    right: -20px;
    padding-right 3px
    border: 1px solid #e2e2e2;
    border-left 0 none
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    background: #fff;
    cursor pointer

    &:hover{
      border: 1px solid #ccc;
      border-left 0 none
    }

    span{
      padding-top 6px
      display block
    }
  }
}
</style>
